<template>
  <van-popup 
    v-model="show" 
    position="center" 
    round
    @closed="closePop"
    >

        <div class="location-center-wrap" >
            <div class="location-title" >
                <div class="location-title-left" >当前所属区域</div>
                <div @click="handleToArea" class="location-title-change active-btn" >切换</div>
            </div>
            <div class="location-desc" >
                {{ addressText }}
            </div>
            <div @click="handleToLocation" class="confirm-btn active-btn" >确定</div>
        </div>
    </van-popup>
</template>

<script>
import { UPDATE_LOCATION } from '@/api/home';
export default {
    props: {
        adcode: {
            type: String
        },
        addressText: {
            type: String
        },
        latitude: {
            type: [String, Number]
        },
        longitude: {
            type: [String, Number]
        }
    },
    data() {
        return {
            show: false,
        }
    },
    methods: {
        closePop() {
            this.show = false;
        },
        // 归属地
        handleToLocation() {
            this.$http.post(UPDATE_LOCATION, {
                latitude:  this.latitude,
                longitude: this.longitude,
                region_code: this.adcode
            })
            .then(() => {
                this.show = false;
            })
        },
        // 归属地选择
        handleToArea() {
            this.show = false;
            this.$router.push({
                name: 'myArea'
            })
        }
    }
}

</script>
<style lang="scss" >
    .location-center-wrap{
        width: 5.74rem;
        padding: 0.28rem 0.32rem 0.4rem;
        background: #ffffff;
        .location-title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 0.4rem;
            .location-title-left{
                font-weight: 400;
                font-size: 0.28rem;
                color: #666666;
            }
            .location-title-change{
                font-weight: 400;
                font-size: 0.28rem;
                color: #31A653;
            }
        }
        .location-desc{
            margin-top: 0.52rem;
            margin-bottom: 0.58rem;
            padding: 0 0.6rem;
            font-weight: 500;
            font-size: 0.36rem;
            line-height: 0.5rem;
            color: #333333;
            text-align: center;
        }

        .confirm-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3.08rem;
            height: 0.8rem;
            margin: auto;
            font-weight: 400;
            font-size: 0.32rem;
            color: #ffffff;
            border-radius: 0.4rem;
            background: linear-gradient( 136deg, #6EC069 0%, #42A633 100%);
        }
    }
</style>